import React, { ReactNode, useEffect } from 'react';
import './index.scss';
const preCls = 'f_table';

interface ColumnItem {
  title: string;
  dataIndex: string;
  width?: number;
  render?: (text: string, record: any, index: number) => ReactNode;
  className?: string;
  style?: object;
}
interface TableProps {
  dataSource: Array<any>;
  column?: Array<ColumnItem>;
  width?: number; // table宽度
  className?: string;
  style?: object;
}
const Table: React.FC<TableProps> = (props: TableProps) => {
  const { dataSource = [], column = [], width = NaN, className = '', style = {} } = props;

  return (
    <div className={`${preCls} ${className}`} style={style}>
      <table style={{ width: `${width}px` }}>
        <thead>
          <tr>
            {column.map(
              (col, index): ReactNode => (
                <th key={index} style={{ width: col.width ? `${col.width}px` : 'initial' }}>
                  {col.title}
                </th>
              )
            )}
          </tr>
        </thead>
        <tbody>
          {dataSource.map((item, index1) => (
            <tr key={index1}>
              {column.map((col, index2) => (
                <td
                  key={index2}
                  className={col.className}
                  style={{ ...col.style, width: col.width ? `${col.width}px` : 'initial' }}>
                  {col.render ? col.render(item[col.dataIndex], item, index1) : item[col.dataIndex]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;
